<template>
    <div class="course-rxf">
        <div class="course-rxf1">
            <ul>
                <li class="course-li">11</li>
                <li class="course-li1">特色课</li>
                <li @click="coursevan">
                    <van-icon name="search" class="course-van" />
                </li>
            </ul>
        </div>
         <!-- :active-color="$theme_color" -->
        <van-dropdown-menu>
            <van-dropdown-item title="分类" ref="kinds">
                <div class="parent-box">
                    <div class="tm-kind" v-for="(item,index) in attrclassify" :key="item.id">
                        <p>{{item.name}}</p>
                        <div class="tmk-item">
                            <span
                            :class="attr_val_id['attr'+index] == it.id ? 'active':''"
                            v-for="it in item.child"
                            :key="it.id"
                            @click="selectId(it.id,'attr'+index)"
                            >{{it.name}}</span>
                        </div>
                    </div>
                    <div class="seach-btn">
                        <van-button @click="reset('kinds')">重置</van-button>
                        <van-button @click="searchFor('kinds')">确定</van-button>
                    </div>
                </div>
            </van-dropdown-item>
            <van-dropdown-item title="排序" ref="sort">
                <ul class="course-sort">
                    <li
                    :class="from.order_by == item.value ? 'active':''"
                    v-for="item in option"
                    :key="item.value"
                    @click="selectType('sort',item.value)"
                    >{{item.text}}</li>
                </ul>
            </van-dropdown-item>
            <van-dropdown-item title="筛选" ref="filter">
                <div class="filter-box">
                    <div class="tm-kind">
                        <div class="tmk-item">
                            <span
                            :class="from.course_type == item.type ? 'active':''"
                            v-for="item in course_types"
                            :key="item.type"
                            @click="selectType('filter',item.type)"
                            >{{item.value}}</span>
                        </div>
                    </div>
                </div>
            </van-dropdown-item>
        </van-dropdown-menu>
        <div class="course-rxf3" @scroll.passive="getScroll($event)">
            <ul v-for="(item,key) in list" :key="key" class="course-rxful" @click="edd(item)">
                <li>
                    <p>{{item.title}}</p>
                    <p>共{{item.browse_base}}课时</p>
                    <ul>
                        <li v-for="(item,key) in item.teachers_list" v-show="key<3" :key="key" style="display: flex;width: 100%;height: 40px">
                            <img class="img1" :src="item.teacher_avatar" alt />
                            <span>{{item.teacher_name}}</span>
                        </li>
                    </ul>
                    <hr style="color: #f2f2f2" />

                    <p class="course-rxfp">
                        <span class="a2">共有{{item.total_periods}}人报名</span>
                        <span class="a2" style="float: right;color: green">免费</span>
                    </p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { Tab, Tabs } from 'vant';
import { DropdownMenu, DropdownItem } from 'vant';
import { Button } from 'vant';
import { course } from "@/request/http";
import { classify } from "@/request/http";
import { getClassify } from "@/request/http";
import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'
export default {
    name: "course",
    components: {
        [Tab.name]: Tab,
        [Tabs.name]: Tabs,
        [DropdownMenu.name]: DropdownMenu,
        [DropdownItem.name]: DropdownItem,
        [Button.name]: Button,
    },
    data() {
        return {
            list: [],
            loading: false,
            finished: false,
            fron:{
                page:1,
                limit:10,
                course_type:0,
                classify_id:0,
                order_by:0,
                attr_val_id:0,
                is_vip:0
            },
            attrclassify:[],
            option: [
                { text: "综合排序", value: 0 },
                { text: "最新", value: 1 },
                { text: "最热", value: 2 },
                { text: "价格从低到高", value: 3 },
                { text: "价格从高到低", value: 4 }
            ],
            course_types: [
                { type: 0, value: "全部" },
                { type: 2, value: "大班课" },
                { type: 3, value: "小班课" },
                { type: 4, value: "公开课" },
                { type: 5, value: "点播课" },
                { type: 7, value: "面授课" },
                { type: 8, value: "音频课" },
                { type: 9, value: "系统课" },
                { type: 10, value: "图文课" },
                { type: 11, value: "会员课" }
            ],
            order_by: "",
            course_type: 0,
            attr_val_id: {},
            classify_id: "",
            num:0
        };
    },
    computed: {
        ...mapState(["from","str"]),
    },
    methods: {
        ...mapMutations(['course1','course2','search','out']),
        getScroll(event,from) {                            //下拉加载
            // 滚动条距离底部的距离scrollBottom
            let scrollBottom =
                event.target.scrollHeight -
                event.target.scrollTop -
                event.target.clientHeight;
            // console.log(scrollBottom);
            
            if(this.str==1 && scrollBottom < 5){
                this.fron.page+=1
                this.search(this.fron)
                this.onLoad();
            }else if(this.str==2 && scrollBottom < 5){
                this.fron.page+=1
                this.search(this.fron)
                this.searchFor();
            }
        },
        onLoad() {
            var str=[]                        //默认
            course(this.from).then(res => {
                str = res.data.data.list
                this.list=this.list.concat(str);
            });
        },
        onLoad2() {
            course(this.from).then(res => {
                res = res.data.data.list
                this.list=res;
            });
        },
        selectId(id, attr) {                        //分类选项
            this.out(2)
            this.fron.attr_val_id=id
            this.search(this.fron)
        },
        reset(name) {                           //分类选项--取消
            this.$refs[name].toggle();
        },
        searchFor(name) {                       //分类选项--确定
            this.$refs[name].toggle();
            course(this.from).then(res => {
                res=res.data.data.list
                this.list=res;
            });
            this.search(this.fron)
        },
        selectType(name,val) {
            this.$refs[name].toggle();
            this.out(3)
            if (name == "filter") {
                this.fron.course_type = val;       //筛选
                this.search(this.fron)
                this.onLoad2();
                console.log(this.from);
            } else {                  
                this.fron.order_by = val;          //排序
                this.fron.limit = 100;
                this.search(this.fron)
                this.onLoad2();
            }
        },
        edd(item) {                                   //跳转详情
            this.$router.push({
                path: "/coursedata",
                query: { id: item.id }
            });
            this.course1()
        },
        getClassify() {                             //分类 排序 筛选 数据获取
            getClassify().then(res => {
                res= res.data.data
                this.attrclassify=res.attrclassify;
            });
        },
        coursevan(){                                //跳转搜索页面
            this.$router.push("/Search")
            this.course1()
        },
    },
    mounted() {                                     
        this.out(1)
        this.search(this.fron)
        this.onLoad();
        this.getClassify();
    }
};
</script>

<style lang="scss" scoped>
*{
    padding: 0;
    margin:0;
}
.course-rxf {
    width: 100%;
    background: #E5E5E5;
    .course-rxf1 {
        width: 100%;
        margin: 0 auto;
        ul {
            height: 50px;
            background: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .course-li {
                color: white;
                font-size: 30px;
            }
            .course-li1 {
                // color: white;
                font-size: 20px;
            }
            li {
                .course-van {
                    font-size: 30px;
                }
            }
        }
    }
}
.course-fitler {
    height: 84px;
}
// .parent-box {
//     padding-bottom: 20px;
//     .seach-btn {
//         padding: 10px 0px;
//         display: flex;
//         justify-content: space-between;
//         button {
//             width: 340px;
//             height: 40px;
//             background: rgba(255, 255, 255, 1);
//             border-radius: 5px;
//             border: 2px solid rgba(217, 217, 217, 1);
//             font-size: 15px;
//             font-family: PingFangSC-Regular;
//             font-weight: 400;
//             color: rgba(89, 89, 89, 1);
//             margin-right: 10px;
//             margin-left: 10px;
//             &:last-child {
//                 color: #fff;
//                 background: yellow;
//                 border: 0;
//             }
//         }
//     }
// }
.parent-box {
    // padding-left: 30px;
    padding-bottom: 20px;
    .seach-btn {
        padding: 10px 0px;
        display: flex;
        justify-content: space-between;
        button {
            width: 340px;
            height: 40px;
            background: rgba(255, 255, 255, 1);
            border-radius: 5px;
            border: 2px solid rgba(217, 217, 217, 1);
            font-size: 15px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(89, 89, 89, 1);
            margin-right: 10px;
            margin-left: 10px;
            &:last-child {
                color: #fff;
                // background: #C9CEF7;
                background: #EB6100;
                border: 0;
            }
        }
        span.active {
            color: #C9CEF7;
            background: #ebeefe;
        }
    }
}
.tm-kind {
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f1f1;
    p {
      padding: 10px 10px;
      font-size: 13px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(89, 89, 89, 1);
    }
    .tmk-item {
        span {
            margin: 5px 10px;
            display: inline-block;
            width: 74px;
            height: 35px;
            background: rgba(245, 245, 245, 1);
            border-radius: 6px;
            font-size: 15px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: #646464;
            text-align: center;
            line-height: 35px;
            overflow: hidden;
            &:nth-child(4n + 0) {
                margin-right: 0;
            }
        }
        span.active{
            color:red;
            // #ebeefe
            background: #ebeefe;
        }
    }
}
.course-sort {
    background: #fff;
    li {
      height: 40px;
      text-align: center;
      line-height: 40px;
      font-size: 15px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(89, 89, 89, 1);
      border-bottom: 1px solid #f5f5f5;
      &:last-child {
        border: 0;
      }
    }
    li.active {
      color: #F77115;
    }
}
.course-rxf3{
    height: 78vh;overflow: scroll;
}
.course-rxf3>ul{
    width: 95%;
    background: white;
    margin: 0 auto;
    border-radius: 5px;
    margin-top:10px; 
}
.course-rxf3>ul>.course-rxfp{
    padding-right:20px; 
}
.course-rxf3>ul>li{
    padding-left:5px; 
}
.course-rxf3>ul>li img{
    width: 25px;
    height: 25px;
    border-radius: 50%;
}
.course-rxf3>ul>li p{
    padding: 15px 0;
    span{
        margin-top: 10px;
    }
}
.course-rxf3>ul>li>ul{
    display: flex;
    width: 100%;
    overflow: hidden;
    // flex-wrap: wrap;
}
.course-rxf3>ul>li>ul>li{
    width: 25%;
}
.course-rxf3>ul>li>ul>li>span{
    margin-top: 5px;
    margin-left: 10px;
}
</style>